<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<div class="row">
				<!-- row行  col列 -->
				<!-- 需求：pc端一行放4张图片、平板一行放2张图片，手机一行放1张图片 -->
				<!-- .col-12.col-sm-6.col-md-3 -->
                <div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="w-100" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="w-100">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="w-100">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="w-100">
				</div>
			</div><div class="row">
				<!-- row行  col列 -->
				<!-- 需求：pc端一行放4张图片、平板一行放2张图片，手机一行放1张图片 -->
				<!-- .col-12.col-sm-6.col-md-3 -->
                <div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-fluid" >
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-fluid">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-fluid">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-fluid">
				</div>
			</div>
			<div class="row">
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-thumbnail">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-thumbnail">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-thumbnail">
				</div>
				<div class="col-12 col-sm-6 col-md-3">
					<img src="../image/cat-1.jpeg" class="img-thumbnail">
				</div>
			</div>
			<div class="container clearfix">
				<h3>使用浮动实现图片对齐</h3>
				<img src="../image/cat-1.jpeg" title="第一张图片" class="float-right">
				<img src="../image/cat-1.jpeg" class="float-left">
			</div>
			<div class="container border text-center">
				<img src="../image/cat-1.jpeg" >
			</div>
		</div>
		<div class="container">
			<img src="../image/cat-1.jpeg" class="mx-auto d-block" >
		</div>
		<div style="width: 300px;background-color: red;height: 300px;" class="mx-auto">hello hello</div>
	</body>
</html>
